<template>
    <view class="comp.radio">
        <view class="hd fboxRow Ycenter font32"><template v-if="innerData.isRequired">*</template> {{index+1}}.{{innerData.subject}}</view>
        <view class="bd font28">
            <van-radio-group v-model="radio" @change="change">
                <van-radio v-for="(item,index) in innerData.options" :key="index" checked-color="#121575"
                           :name="item.text">{{item.text}}
                </van-radio>
            </van-radio-group>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            innerData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            index: {
                type: Number,
                default: 0
            },
            answers: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                radio: ''
            };
        },
        computed:{
            _answers:{
                get(){
                    return this.answers
                },
                set(val){
                    this.$emit('update:answers',val)
                }
            }
        },
        methods: {
            change() {
                if(this._answers.length){
                    let state = true
                    this._answers.filter(item=>{
                        if(item.subjectId == this.innerData.id){
                            item.text = this.radio
                            state = false
                        }
                    })
                    if(state){
                        this._answers.push({
                            subjectId: this.innerData.id,
                            text: this.radio
                        })
                    }
                }else{
                    this._answers.push({
                        subjectId: this.innerData.id,
                        text: this.radio
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .hd{line-height: 42rpx;}
    .bd {
        margin-top: 30rpx;
        color: #121575
    }

    .van-radio {
        margin-top: 10rpx
    }

    .bd /deep/ .van-radio__label {
        color: #121575
    }

    .bd /deep/ .van-radio__icon {
        transform: scale(.8)
    }
</style>

